<template>
	<view class="block">
		<!-- <view class="honhsebjt"></view> -->
		<view class="" ref="viewimage">
			<view class="">
				<view class="dingbu">
					<image src="@/static/image/system/hehuor.png" mode=""></image>
				</view>
				<view class="box flexcenter">
					<view class="">
						<view class="mainpadding_top ffffff" style="border-radius: 20rpx;">
							<view class="flexcenter">
								<!-- <image :src="userinfo.avatar_text" mode="" class="img margin_right3"></image> -->
								<view style="text-align: left;">
									<view>昵称：{{userinfo.nickname}}</view>
									<view class="txt margin_top1">手机号：{{userinfo.mobile}}</view>
								</view>
							</view>
							<view class="flexcenter">
								<uqrcode ref="uqrcode" canvas-id="qrcode" @click="ewmfn" v-bind:value="qrcodeurl"
									:options="{ margin:20}" size="150">
								</uqrcode>
							</view>
						</view>
					</view>

				</view>
				<view class="ljyq flexcenter margin_top6" v-show="isshow">
					<image src="@/static/image/system/ljfx.png" mode="" @click="toImage()"></image>
				</view>
			</view>
		</view>
		<u-popup :show="forward" :round="10" mode="center" @close="forward=false;isshow = true">
			<view class="popupbox">
				<image :src="imageaaa" mode="widthFix" style="width: 100%;"></image>
			</view>
			<view class="bighbtn">长按保存图片</view>
		</u-popup>
	</view>

</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import html2canvas from 'html2canvas'
	export default {
		data() {
			return {
				forward: false,
				imageaaa: "",
				userinfo: {},
				qrcodeurl: "",
				pageShow: false,
				urlasdfa: '',
				isshow:true
			}
		},
		onShow() {
			this.datalist()
		},
		methods: {
			toImage() {
				this.isshow = false
				uni.showLoading({
					mask:true,
					title:"海报绘制中"
				})
				setTimeout(()=>{
					html2canvas(this.$refs.viewimage.$el).then(canvas => {
						let base64 = canvas.toDataURL("image/png");
						this.imageaaa = base64
						this.forward = true;
						console.log(this.imageaaa)
						uni.hideLoading();
					});
				},1000)
				
			},
			ewmfn() {
				this.$refs.uqrcode.toTempFilePath({
					success: res => {
						console.log(res);
						var i = [res.tempFilePath]; //获取当前页面的轮播图数据
						//uniapp预览轮播图
						uni.previewImage({
							current: 0, //预览图片的下标
							urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
						})
					}
				});
			},
			datalist() {
				let _this = this;
				httpRequest.request('/api/user/index', 'GET', {}).then(res => {
					if (res.code == 1) {
						this.userinfo = res.data
						this.qrcodeurl = "https://posh5.yikaxinxikeji.cn?invite_code="+res.data.invite_code
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.popupbox {
		// flex: 1;
		width: 500rpx;
		// height: 800rpx;
		box-sizing: border-box;
	}

	.txt {
		font-size: 24rpx;
	}

	.img {
		width: 85rpx;
		height: 85rpx;
		border-radius: 50%;
	}

	/deep/.u-button {
		height: 145rpx !important;
	}

	/deep/.u-button--info {
		background-color: #ff082d !important;
		border-color: none !important;
		border-style: none !important;
	}

	button {
		margin: 0;
		padding-left: 0;
		padding-right: 0;
		background-color: none;
		background: none;
		line-height: 25rpx;
		color: none;
		border-radius: 0;
	}

	button::after {
		border: none !important;
		border-radius: 0 !important;
	}

	.box {
		width: 100%;
	}

	.baisetext {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFE9BC;
	}

	.ljyq {
		width: 100%;
		image {
			width: 563rpx;
			height: 153rpx;
		}
	}

	.dingbu {
		width: 100%;
		height: 800rpx;
		// position: fixed;
		top: 0;
		left: 0;

		image {
			width: 100%;
			height: 100%;
		}
	}

	page {
		background-color: #ff082d;
	}
</style>